<template>
  <div class="shopping-cart-item">
    <input type="checkbox" v-model="goods.goods_state">
    <div class="img-wrapper">
      <img :src="goods.goods_img" class="center">
    </div>
    <div class="info">
      <div class="title">{{ goods.goods_name }}</div>
      <div class="price-wrapper">
        <div class="price">￥{{ goods.goods_price }}</div>
        <div class="counter">
          <button @click="goods.goods_count > 1 && goods.goods.count--">-</button>
          <input type="text" size="3" v-model.number="goods.goods_count">
          <button @click="goods.goods_count++">+</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    goods: {
      type: Object,
      default: {},
    },
  },
}
</script>

<style scoped>
  .shopping-cart-item {
    width: 100%;
    height: 136px;
    border-bottom: 1px solid #ccc;
    display: flex;
    /* justify-content: space-between; */
    padding: 8px;
    box-sizing: border-box;
  }
  /* img.horizontal {
    height: 100%;
    width: auto;
  } */
  img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  .img-wrapper {
    height: 120px;
    width: 120px;
    overflow: hidden;
    border-radius: 8px;
    margin: 0 8px;
  }
  .center {
    /* 1. flex */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 2. position */
    /* position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
  }
  .price-wrapper {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .price {
    color: red;
  }
  .info {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .title {
    /* 多行文字溢出 */
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
</style>